Ich muss mal wieder eine Seite anpassen. Bisher hatte es ein anders Menu-Modul, als das des Allrounders. Aber das wird nicht mehr supportet und war auch sehr schlecht in der mobilen Ansicht. Also habe ich einfach auf das Allroundermenu umgestellt:
www.schulwaldegg.ch/2020
. Nun will in der Handyansicht partout kein Hamburgermenu entstehen. Egal, was ich bei der Modulklassensuffix eingebe. Habe es mit _menu, nav-pills und auch lv_dropdown schon probiert. Bei meinen anderen Seiten war jeweils etwas davon eingestellt (alle mit dem Allrounder gemacht). Wo liegt der Fehler? Grr, habs gefunden! Bei den Templateeinstellungen musste ich auf Tablett umstellen, jetzt gehts. Dann also nur noch das mit der Image-Map lösen herausfinden :-)
Auf dem Hauptbanner hat es auch eine Image-Map zum anderen Schulhaus. Bisher war mir das ja nicht bewusst, dass sowas auf dem Handy nicht geht. Habe dafür den Link auch ins Menu genommen. Aber könnte man sowas mit CSS machen? Und wenn ich auf dem Laptop dort anklicke kommt so ein hässlicher schwarzer Rahmen. Kann man den irgendwie feiner machen oder gar ausblenden?
Betreffend Map bin ich etwas überfragt. Das habe ich Jahrzehnte nicht mehr benutzt.
Dass es auf dem Handy nicht funktioniert liegt daran dass das Bild skaliert wird, und dann die Koordinaten entsprechend nicht mehr stimmen. Du müsstest den Rahmen relativ zum Bild (prozentual) angeben können - ob das geht weiss ich nicht.
Ich würd spontan einfach zwei Bilder nebeneinander daraus machen, und das linke ist auf die andere Schule verlinkt.
Danke Thomas, das mit der Map habe ich so gelöst, dass es einfach einen Link bei Willkommen geben wird, oder evt. deine Lösung mit dem Bild. Habe aber viel grössere Probleme:
a) ich hätte gerne den Rand vor und nach dem Hamburger kleiner, also die weisse Teile. Habe das bis jetzt nicht gefunden. Auch nicht mit diesem @media....
b) viel schlimmer ist aber, dass die Navi in der mobilen Version klemmt. Ersten überlappt es teils die unter Zeilen, man bleibt stecken, irgenwie ganz komisch. Hast du eine Idee, an was das liegen könnte?
Der obere weisse Rand kommt daher dass der Header eine minimale Höhe von 120px definiert hat. Wenn das Bild kleiner wird, gibts nen weissen Rand.
#header {
min-height: 120px;
}
Das könntest du mit @media Queries für kleinere Bildschirme auch anpassen oder deaktivieren.
Den unteren Balken seh ich spontan auch nicht woher der kommt.
Warum das Menü klemmt weiss ich auch nicht. Bei mir funktioniert es ja.
Das Template hat da auch nix spezielles betreffend Menü. Es nutzt das normale Menümodul von Joomla.
Hast du allenfalls mal eigene CSS Regeln fürs Menü gemacht?
Also: mit viel Ach und Krach habe ich es geschafft, das Menu anzupassen. Hatte noch vieles vom fremden Menu drin. Jetzt sieht es ganz ordentlich aus. Was ich jetzt gerne noch hätte: Wenn man auf dem Laptop auf einen Menupunkt klickt, sieht man die Drowdown-Pfeilchen (ausser beim ersten Menupunkt, warum auch immer). Ich hätte die gerne immer eingeblendet und mit Dreiecken ersetzt, geht das?
Und du hast mir ja gezeigt, wie ich auf dem Handy ein Modul an bestimmten Orten ausblende. Geht bei dieser Seite um die News, die auf dem Desktop link sind. Hat bestens geklappt. Aber - auf dem Tablett wird das trotzdem eingeblendet. Gleichzeitig erscheint dort aber wunschgemäss das mobile Menu. Kann man das jetzt auch so anpassen? Im Stile von hidden phone and tablet???
Die Dropdown-Pfeilchen sind auch beim ersten Menüpunkt. Die sind jeweils dahinter, nicht davor.
Angezeigt werden sie mittels CSS:
@media (min-width: 980px)
#topmenu ul.menu > li.parent > a, #topmenu ul.menu > li.parent > span.separator {
background-image: url(../images/menu/menu-parent-smooth.png);
}
Und ja, das kannst du selbstverständlich auch anpassen.
Ja, ein Modul kannst du auch für Tablets ausblenden lassen. Oder besser nur für PCs anzeigen.
Guckste hier:
getbootstrap.com/2.3.2/scaffolding.html#responsive
, bei "Responsive utility classes" gibts ne nette Tabelle.
